<template>
  <div class="form_box">
      <el-tabs
        v-model="activeName"
        @tab-click="handleClick"
        type="card"
        class="w-70"
      >
        <!--  修改密码处理块 -->
        <el-tab-pane label="修改密码" name="first" class="oneTab">
          <div class="form_box_row">
              <span class="font_base mr-5">密码类型:</span>
              <MUserPasswordInput
                @onDataChanged="onPasswordChanged"
              ></MUserPasswordInput>
          </div>
          <div class="form_box_row">
              <el-button style="margin-top: 12px" type="primary" :loading="loading" @click="updatePassword">更新密码</el-button>
          </div>
        </el-tab-pane>        
      </el-tabs>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { useStore,mapGetters  } from 'vuex'
import { MUserPasswordInput,MUserRoleSelect } from '@/manager-core/page/muser/impl'
import { muserPasswordChangeApi } from '@/manager-core/api/muser/muser'
import { ElMessage } from 'element-plus'


export default defineComponent({
  name: 'AccountPage',

  components: {
    MUserPasswordInput
  },

  data(){
    return {
        loading : false,

        ptype: 0,
        password: "",

        activeName : "first"
    }
  },

  methods:{
    init(){
    },

    onPasswordChanged(data:any){
      console.log("onPasswordChanged",data);
      this.ptype = data.ptype;
      this.password = data.password;
    },


    updatePassword(){
      this.loading = true;

      ElMessage.info("正在修改中");

      let data = {
        "id": this.id,
        "ptype": this.ptype,
        "p" : this.password
      }

      muserPasswordChangeApi(data)
        .then(()=>{
            ElMessage.success("修改密码成功");
        })
        .finally(()=>{
            this.loading = false; 
        })

    }
  },

  computed:{
    ...mapGetters({
      id: 'managercore/profiles/id'
    }),
  },

  mounted(){
    this.activeName = "first"
  },

  setup(){
    // const store = useStore()

    // return {
    //   LoginByUsername:(userObj:any)=> store.dispatch('LoginByUsername')
    // }

  }


})


// @Component
// export default class Login extends BaseVue {
//   @Action("LoginByUsername", { namespace }) LoginByUsername: any;
//   username: string = "";
//   password: string = "";
//   error: string = "";
//   loading: boolean = false;
//   redirect: string = "";
//   isPhone = false;
//   getCodeText: any = "获取验证码";
//   changeText = "手机验证码登录";
//   userPhone = ""; //手机号
//   codeText = ""; //验证码
//   canClick = true;
//   $message: any;
//   $router: any;
//   $alert: any;
//   login() {
//     if (this.username == null || this.username.length == 0) {
//       this.error = "请填写用户名！";
//       return;
//     }

//     this.loading = true;

//     const lf = {
//       u: this.username,
//       p: this.password,
//     };
//     // this.$router.push({ path: '/' });
//     this.LoginByUsername(lf)
//       .then(() => {
//         store.commit("profileModule/DelTabsInfo", [
//           {
//             path: "/dashboard",
//             query: {},
//             title: "首页",
//           },
//         ]);
//         this.$router.push({ path: "/" });
//       })
//       .catch((error: any) => {
//         console.log(error);
//       })
//       .finally(() => {
//         this.loading = false;
//       });
//   }

//   // 使用手机验证码登陆
//   phoneLogin() {
//     let phone = this.userPhone;
//     if (!/^1[3456789]\d{9}$/.test(phone)) {
//       this.error = "手机号码有误，请重填！";
//       return false;
//     }
//     if (!this.codeText) {
//       this.error = "请输入验证码！";
//       return false;
//     }
//     let code = this.codeText;
//     let data = {
//       phone,
//       code,
//     };
//     phoneLoginApi(data)
//       .then((res: any) => {
//         if (res.code == 0) {
//           this.$message.error(res.message);
//         }
//       })
//       .catch((error) => {
//         console.log(error);
//       });
//   }

//   forget() {
//     this.$alert("请直接联系管理人员获得密码！", "忘记密码", {
//       showConfirmButton: false,
//       closeOnClickModal: true,
//     });
//   }
//   // 更改登录方式
//   changePage() {
//     this.isPhone = !this.isPhone;
//     this.error = "";
//     if (!this.isPhone) {
//       this.changeText = "手机验证码登录";
//     }
//     if (this.isPhone) {
//       this.changeText = "用户名密码登录";
//     }
//   }
//   // 获取验证码
//   getCode() {
//     let phone = this.userPhone;
//     let _this: any = this;
//     if (!/^1[3456789]\d{9}$/.test(phone)) {
//       this.error = "手机号码有误，请重填！";
//       return false;
//     }
//     if (this.canClick) {
//       this.canClick = false;
//       let phone = _this.userPhone;
//       // 验证码接口
//       getCodeApi(phone)
//         .then((res) => {
//           console.log(123, res);
//         })
//         .catch((error) => {
//           console.log(error);
//         });
//       this.getCodeText = 60;
//       let CodeInterval = setInterval(() => {
//         if (this.getCodeText > 0) {
//           this.getCodeText -= 1;
//         } else {
//           clearInterval(CodeInterval);
//           this.canClick = true;
//           this.getCodeText = "重新获取验证码";
//         }
//       }, 1000);
//     }
//   }

// }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>

</style>
